<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>垂直对齐文本</title>
    <!--这个例子演示了如何设置文本的垂直对齐图像。-->
    <style>
        img.top {vertical-align: text-top;}
        img.bottom {vertical-align: text-bottom;}
    </style>
</head>
<body>
<p>一个<img src="./image/logo.png" alt="w3cschool" width="270" height="50"/>默认对齐的图像. </p>
<p>一个<img class="top" src="./image/logo.png" alt="w3cschool" width="270" height="50" />  text-top 对齐的图像。</p>
<p>一个<img class="bottom" src="./image/logo.png" alt="w3cschool" width="270" height="50" /> text-bottom 对齐的图像。</p>
</body>
</html>